/**
 * Plot图像的输出函数封装
 *
 * @author XuGaoran
 * @since 1.0.0
 * @version 1.0.0
 */
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent
} from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

import { EchartsClass } from "./EchartsClass";

/**
 * 柱状图的展示类
 */
export class PieEcharts extends EchartsClass {
  /**
   * 子类构造器
   * @param {HTMLElement} element HTML页面中的组件
   */
  constructor(element) {
    super(element);
  }

  /**
   * 重载方法，组建注册
   */
  echartsUse() {
    echarts.use([
      TitleComponent,
      TooltipComponent,
      ToolboxComponent, 
      GridComponent,
      LegendComponent,
      CanvasRenderer,
      PieChart,
      LabelLayout,
    ]);
  }

  /**
   * 重载方法，组件options的配置
   * @param {Object} response 需要的json数据的格式将在备注中完善
   * @returns 需要返回options的配置
   *
   * @note response类型如下所示。
   * {
   *   "title": string, 图的标题
   *   "landtypes": list 土地利用类型
   *   "countryData": list[{value, name}] 对应的数据
   *    // value是对应的数据，name是对应的标签
   * }
   */
  setOption(response) {
    const option = {
      title: {
        text: response["title"],
        textStyle: {
          color: '#fff', // 设置标题文本颜色为白色
        },
        left: "center",
        top:25,
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      toolbox: {
        show: true,
        top:25,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      legend: {
        left: "center",
        top: "bottom",
        data: response["landtypes"],
        top:300
      },
      series: [
        {
          name: "土地占用详细信息",
          type: "pie",
          radius: '50%',
          top:-20,
          label: {
            show: false,
          },
          emphasis: {
            label: {
              show: true,
            },
          },
          data: response["countryData"],
        },
      ],
      // 将图表容器上移
    grid: {
      top: '50%', // 调整图表容器距离顶部的距离，您可以根据需要修改这个值
    },
    };
    return option;
  }
}
